import React, { Component } from 'react';
import "./index.less"
import { Route, Switch, NavLink } from 'react-router-dom'
import {SpinLoading} from 'antd-mobile'
// import Home from '../Home/Home'
// import Cate from '../Cate/Cate'
// import ShopCart from '../ShopCart/ShopCart'
// import Mine from '../Mine/Mine'
let Home = React.lazy(()=>import('../Home/Home'));
let Cate = React.lazy(()=>import('../Cate/Cate'));
let ShopCart = React.lazy(()=>import('../ShopCart/ShopCart'));
let Mine = React.lazy(()=>import('../Mine/Mine'));

class Index extends Component {
    render() {
        return (
            <div className='index'>
                {/* 二级路由 */}
                <React.Suspense fallback={<SpinLoading style={{ '--size': '48px', position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)' }} />}>
                    <Switch>
                        <Route path="/index/home" component={Home}></Route>
                        <Route path="/index/cate" component={Cate}></Route>
                        <Route path="/index/shopcart" component={ShopCart}></Route>
                        <Route path="/index/mine" component={Mine}></Route>
                    </Switch>
                </React.Suspense>
                

                {/* 底部导航 */}
                <footer>
                    <NavLink to="/index/home" activeClassName="active">首页</NavLink>
                    <NavLink to="/index/cate" activeClassName="active">分类</NavLink>
                    <NavLink to="/index/shopcart" activeClassName="active">购物车</NavLink>
                    <NavLink to="/index/mine" activeClassName="active">我的</NavLink>
                </footer>
            </div>
        );
    }
}

export default Index;
